<template>
  <div>
    <div id="tiltes">
<!--      <div class="contians" style="width: 600px;">-->
        <img alt="Vue logo" src="../assets/logo.jpg" style="margin-left: 100px;margin-top: 40px">
<!--    </div>-->
<!--      <div class="loginForm">-->
    </div>
    <div style=" height: 700px; margin: 0 auto; text-align:center; background-color: #de0100">

      <div class="imgs" style="width: 600px;">
<!--        <img alt="Vue logo" src="../assets/logo.png" style="width: 100%;height: 500px">-->
      </div>
      <div class="register">
        <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="loginname">
            <el-input v-model="ruleForm.loginname" style="border: #000"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="ruleForm.realname"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idnumber">
            <el-input v-model="ruleForm.idnumber"></el-input>
          </el-form-item>
          <el-form-item label="选择身份" prop="userclassify">
            <el-radio-group v-model="ruleForm.userclassify">
              <el-radio label="0">普通用户</el-radio>
              <el-radio label="1">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var validateId =(rule,value,callback)=> {
      if (value.length !== 18) {
        callback(new Error('身份证号错误'));
      } else {
        /*if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }*/
        callback();
      }
    };
    //验证登录名是否存在
    var validateName = (rule,value,callback)=>{
      // alert(value)
      var vm = this;
      axios.get("http://localhost:8082/book-manager/user/verify?loginname="+vm.ruleForm.loginname).then(function (resp){
        if (resp.data==1){
          callback(new Error('用户名重复'));
        }
      });
    };
    return {
      ruleForm: {
        region: '',
        checkPass: '',
        realname: '',
        idnumber:'',
        phone:'',
        loginname:'',
        password: '',
        userclassify: '0'
      },
      rules: {
        idnumber:[
          { validator: validateId, trigger: 'blur' },
          { min: 18, max: 18, message: '身份证号长度应为18位', trigger: 'blur' }
        ],
        realname:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        loginname: [
          { validator: validateName, trigger: 'blur' },
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        phone:[
          { min: 11, max:11, message: '长度为 11 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        alert(1)
        var vm = this;
        if (valid) {
          alert(vm.ruleForm);
          axios({
            method: 'post',
            url: 'http://localhost:8082/book-manager/user/register',
            data: qs.stringify(vm.ruleForm)
          }).then(function (resp){
            console.log(resp.data)
            this.$router.push("/");
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {

      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
  .imgs,.register{
    display: inline-block;
    box-sizing: border-box;
  }
  .register{
    margin-top: 70px;
    width: 500px;
    text-align: center;
    background-color: white;
  }
  .demo-ruleForm{
    margin: 50px auto;
    width: 80%;
  }
  #tiltes{
    text-align: left;
    height: 100px;
  }
  #tiltes p{
    margin-left: 100px;
    font-size: 36px;
    margin-bottom: 25px;
  }
</style>
